<!-- 用户界面 -->
<template>
  <div>
    <header-menu-sider />
    <a-card style="margin:0 auto;width:90%;margin-top:25px;">
      <a-row>
        <a-col :span="5">
          <user-left-menu-sider :open="isOpen" @key="getKey"/>
        </a-col>
        <a-col :span="16" :offset="1">
          <user-descriptions v-if="key === '1'" @open="judgeOpen" />
          <user-article-list-table v-if="key === '2' || key === '7'" :currentKey="key"/>
          <user-article-comment-table-list v-if="key === '3'" />
          <user-article-question-list-table :isSolve="isSolve"  v-if="key === '5' || key === '6'" />
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// import HeaderMenuSider from "@/components/Sider/HeaderMenuSider";
import HeaderMenuSider from "@/components/Sider/HeaderMenuSider.vue";
import UserLeftMenuSider from "../../components/Sider/UserLeftMenuSider.vue";
import UserDescriptions from "../../components/Descriptions/UserDescriptions.vue";
import { getInfo } from "@/apis/user";
import UserArticleListTable from '../../components/Table/UserArticleListTable.vue';
import UserArticleCommentTableList from '../../components/Table/UserArticleCommentTableList.vue';
import UserArticleQuestionListTable from '../../components/Table/UserArticleQuestionListTable.vue';
export default {
  // import引入的组件需要注入到对象中才能使用
  components: { HeaderMenuSider, UserLeftMenuSider, UserDescriptions, UserArticleListTable, UserArticleCommentTableList, UserArticleQuestionListTable },
  data() {
    // 这里存放数据
    return {
      userInfo: {},
      isOpen: true,
      key: '1',
      isSolve: false
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    $route: {
      handler() {
        this.getInfo();
      },
    }
  },
  //方法集合
  methods: {
    getInfo() {
      if (this.$store.getters.token) {
        getInfo().then((res) => {
          let data = {
            id: res.data.id,
            avatar: res.data.avatar,
            name: res.data.name,
            concat: res.data.concat,
          };
          if (data.avatar !== null) this.haveAvatar = true;
          this.userInfo = data;
        });
      }
      if (this.$store.getters.id) {
        this.isOpen = !(
          parseInt(this.$route.params.id) === parseInt(this.$store.getters.id)
        );
        return;
      }
      this.isOpen = true;
    },
    judgeOpen(val) {
      this.isOpen = val;
    },
    getKey(val) {
      this.key = val;
      if(val === '5') this.isSolve = true;
      if(val === '6') this.isSolve = false;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getInfo();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
